<template>
  <view :style="themeColor">
    <view class="page">

      <view class="flex flex-direction align-stretch benben-flex-layout myWode_flex_0">
        <view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/wode/personalData/personalData`" v-if=" isLogin===true">
          <image class='myWode_fd0_0_c0' mode="aspectFit" :src='userInfo.avatar'></image>
          <view class='flex flex-direction align-stretch flex-sub myWode_fd0_0_c1'>
            <view class='flex flex-wrap align-center'>
              <text class='myWode_fd0_0_c1_c0_c0'>{{userInfo.nickname}}</text>
            </view>
            <view class='flex flex-wrap align-center myWode_fd0_0_c1_c1'>
              <text class='myWode_fd0_0_c1_c1_c0'>{{$t('ID:')}}</text>
              <text class='myWode_fd0_0_c1_c1_c0'>{{userInfo.id}}</text>
            </view>
          </view>
        </view>
        <view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/tabBar/loginPage/loginPage`" v-if=" isLogin===false">
          <image class='myWode_fd0_1_c0' mode="aspectFit" :src='STATIC_URL+"97.png"'></image>
          <text class='myWode_fd0_1_c1'>{{$t('立即登录')}}</text>
        </view>
      </view>


      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch justify-between benben-flex-layout myWode_flex_1">
        <view class='flex flex-wrap align-center justify-between myWode_fd1_0'>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/myPublishing/myPublishing`">
            <image class='myWode_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"10.png"'></image>
            <text class='myWode_fd1_0_c0_c1'>{{$t('我的发布')}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/myCollection/myCollection`">
            <image class='myWode_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"11.png"'></image>
            <text class='myWode_fd1_0_c0_c1'>{{$t('我的收藏')}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/suggestion/suggestion`">
            <image class='myWode_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"12.png"'></image>
            <text class='myWode_fd1_0_c0_c1'>{{$t('意见反馈')}}</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---不带边距的个人中心菜单flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myWode_flex_2">
        <view class='flex flex-direction flex-wrap align-stretch myWode_fd2_0'>
          <view class='flex flex-wrap align-center myWode_fd2_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/myMessage/myMessage`">
            <image class='myWode_fd2_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"13.png"'></image>
            <text class='myWode_fd2_0_c0_c1'>{{$t('我的消息')}}</text>
            <view class='flex flex-wrap align-center myWode_fd2_0_c0_c2'>
              <benben-message-num :message-num="data.all" size='26' color='#fff' background-color='red'>
              </benben-message-num>
              <image class='myWode_fd2_0_c0_c2_c1' mode="aspectFit" :src='STATIC_URL+"98.png"'></image>
            </view>
          </view>
          <view class='flex flex-wrap align-center myWode_fd2_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/customerService/customerService`">
            <image class='myWode_fd2_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"14.png"'></image>
            <text class='myWode_fd2_0_c0_c1'>{{$t('客服中心')}}</text>
            <image class='myWode_fd2_0_c1_c2' mode="aspectFit" :src='STATIC_URL+"98.png"'></image>
          </view>
          <view class='flex flex-wrap align-center myWode_fd2_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/xtsz/system/system`">
            <image class='myWode_fd2_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"15.png"'></image>
            <text class='myWode_fd2_0_c0_c1'>{{$t('系统设置')}}</text>
            <image class='myWode_fd2_0_c1_c2' mode="aspectFit" :src='STATIC_URL+"98.png"'></image>
          </view>
        </view>
      </view>

      <!---不带边距的个人中心菜单flex布局结束-->


    </view>
    <!-- #ifdef H5 -->
    <view class="text-df text-white flex align-center justify-between fixedupload" @click.stop="upLoad">
      <view class="flex align-center">
        <image src="../../../static/logo.png" mode=""></image>
        <view class="">使用 NextRent App 解鎖完整功能 </view>
      </view>
      <view class="text-sm btns">去下載</view>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "userInfo": {
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": "",
          "is_close": ""
        },
        "data": {
          "article": "",
          "message": "",
          "chat": "",
          "all": ""
        }
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      uni.setTabBarItem({
        index: 0,
        text: this.$t('首页'),
        iconPath: '/static/tab/tab_diy0.png',
        selectedIconPath: '/static/tab/tab_diy0_active.png'
      })
      uni.setTabBarItem({
        index: 1,
        text: this.$t('求房源'),
        iconPath: '/static/tab/tab_diy1.png',
        selectedIconPath: '/static/tab/tab_diy1_active.png'
      })
      uni.setTabBarItem({
        index: 2,
        text: this.$t('发房源'),
        iconPath: '/static/tab/tab_diy2.png',
        selectedIconPath: '/static/tab/tab_diy2_active.png'
      })
      uni.setTabBarItem({
        index: 3,
        text: this.$t('我的'),
        iconPath: '/static/tab/tab_diy3.png',
        selectedIconPath: '/static/tab/tab_diy3_active.png'
      })
      if (this.isLogin) {
        this.getCornerFunc()
      }
      this.queryUserInfoFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      upLoad() {
        let platform = uni.getSystemInfoSync().platform
        if (platform == 'ios') {
          window.location.href = "https://apps.apple.com/cn/app/nextrent/id6475764677"
        } else {
          window.location.href = "https://play.google.com/store/apps/details?id=com.xianggangfangyuans.benben&pli=1"
        }
      },
      //获取用户详细信息
      async queryUserInfoFunc() {
        if (this.isLogin === true) {
          //请求方法
          //数据验证

          let datauserInfo = await this.$api.get(global.apiUrls.post5c78c4772da97, {

          });

          if (datauserInfo.data.code != 1) {
            this.$message.info(datauserInfo.data.msg);
            return
          }
          let infouserInfo = datauserInfo.data;
          this.userInfo = infouserInfo.data

        }
      },
      //获取消息角标
      async getCornerFunc() {
        //请求方法
        //数据验证

        let datadata = await this.$api.get(global.apiUrls.post64241ca6cf066, {

        });

        if (datadata.data.code != 1) {
          this.$message.info(datadata.data.msg);
          return
        }
        let infodata = datadata.data;
        this.data = infodata.data

      }
    }
  };
</script>
<style lang="scss" scoped>
  .fixedupload {
    width: 100%;
    position: fixed;
    bottom: 100rpx;
    padding: 32rpx 24rpx;
    left: 0;
    text-align: center;
    background-color: #000;
    z-index: 9;
    border-radius: 44rpx 44rpx 0 0;

    image {
      width: 50rpx;
      height: 50rpx;
      border-radius: 16rpx;
      margin-right: 12rpx;
    }

    .btns {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 16rpx;
      text-align: center;
      width: #0181ff;
      background-color: #0181ff;
    }
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('8.png')) no-repeat, #F8F8F8;
    background-size: 100% auto;
  }

  .myWode_flex_0 {
    background: transparent;
    padding: 150rpx 32rpx 0rpx 32rpx;
    background-size: 100% auto !important;
  }

  .myWode_fd0_1_c1 {
    color: #FFFFFF;
    font-size: 40rpx;
    font-weight: 700;
    line-height: 56rpx;
  }

  .myWode_fd0_1_c0 {
    width: 130rpx;
    height: 130rpx;
    border-radius: 68rpx 68rpx 68rpx 68rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .myWode_fd0_0_c1_c1_c0 {
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 36rpx;
  }

  .myWode_fd0_0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd0_0_c1_c0_c0 {
    color: #FFFFFF;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 36rpx;
  }

  .myWode_fd0_0_c1 {
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .myWode_fd0_0_c0 {
    width: 110rpx;
    height: 110rpx;
    border-radius: 68rpx 68rpx 68rpx 68rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .myWode_flex_1 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c0_c1 {
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
    margin: 16rpx 0rpx 0rpx 0rpx;
    line-height: 36rpx;
  }

  .myWode_fd1_0_c0_c0 {
    width: 72rpx;
    height: 72rpx;
  }

  .myWode_fd1_0 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 40rpx 48rpx 40rpx 48rpx;
  }

  .myWode_flex_2 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd2_0_c1_c2 {
    width: 14rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx auto;
  }

  .myWode_fd2_0_c0_c2_c1 {
    width: 14rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .myWode_fd2_0_c0_c2 {
    margin: 0rpx 0rpx 0rpx auto;
  }

  .myWode_fd2_0_c0_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 36rpx;
  }

  .myWode_fd2_0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .myWode_fd2_0_c0 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .myWode_fd2_0 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }
</style>